import React, { FC, memo } from "react"
import { DesktopOutlined, FundProjectionScreenOutlined, PieChartOutlined, UserOutlined } from "@ant-design/icons"
import { Menu, MenuProps } from "antd"
import { useLocation, useNavigate } from "react-router-dom"
import styles from "./index.module.scss"
import logo from "@/assets/images/logo.svg"

type MenuItem = Required<MenuProps>["items"][number]

const items: MenuItem[] = [
    {
        label: "性能监控",
        key: "/home/performance",
        icon: <FundProjectionScreenOutlined />
    },
    {
        label: "错误监控",
        key: "/home/error",
        icon: <PieChartOutlined />
    },
    {
        label: "白屏监控",
        key: "/home/white",
        icon: <DesktopOutlined />
    },
    {
        label: "用户行为监控",
        key: "/home/behavior",
        icon: <UserOutlined />
    }
]

type PropsType = {
    collapsed: boolean
}

const MainMenu: FC<PropsType> = (props: PropsType) => {
    // 用于记录是否展开或收缩菜单栏
    const { collapsed } = props

    const nav = useNavigate()
    // 获取当前路由
    const { pathname } = useLocation()

    function menuClick(event: { key: string }) {
        nav(event.key)
    }
    return (
        <>
            <div className={styles.logo}>
                <img className={styles.img} src={logo} alt="" />
                {!collapsed && <h2 className={styles.title}>Web Monitor</h2>}
            </div>
            {/* 默认选中当前菜单 */}
            <Menu theme="dark" selectedKeys={[pathname]} mode="inline" items={items} onClick={menuClick} />
        </>
    )
}

export default memo(MainMenu)
